<template>
    <base-breadcrumb :title="$route.meta.title">
      <a-card>
          <title-name title="团员信息"></title-name>
          <a-form-model class="flex-model-form"
            ref="addForm"
            :model="detail"
            :rules="rules"
          >
            <a-col :span="8" v-for="(item, index) in formDatas" :key="item.key">
              <template v-if="item.key == 'leagueTime'">
                <a-form-model-item label="入团时间" prop="leagueTime">
                  <a-date-picker
                    placeholder="入团时间"
                    format="YYYY-MM-DD"
                    valueFormat="YYYY-MM-DD"
                    v-model="detail.leagueTime"
                    allow-clear 
                   />
                </a-form-model-item>
              </template>
              <template v-else-if="item.key == 'duesEndTime'">
                  <a-form-model-item label="团费缴至时间" prop="duesEndTime">
                    <a-date-picker
                      placeholder="请选择团费缴至时间"
                      format="YYYY-MM-DD"
                      valueFormat="YYYY-MM-DD"
                      v-model="detail.duesEndTime"
                      allow-clear 
                     />
                  </a-form-model-item>
              </template>
              
              <template v-else>
                <a-form-model-item :label="item.name">
                  <BaseInput :value="formatValue(item)" disabled></BaseInput>
                </a-form-model-item>
              </template>
            </a-col>
          </a-form-model>
      </a-card>
      
      <a-affix class="btn_box page-btn-right-top" :offset-bottom="40">
        <a-button class="ml12" @click="handleClose">关闭</a-button>
        <a-button class="ml12" key="submit" type="primary" :loading="btnloading" @click="submitForm">
          提交
        </a-button>
      </a-affix>
      
    </base-breadcrumb>
</template>

<script>
import Vue from 'vue'
import { Affix } from 'ant-design-vue' // ant
import BaseInput from '@/components/BaseInput'
import { getYouthMemberById, updatePartyMember } from '@/api/partyMasses/leagueManage'
export default {
    name:'a'+ Date.now(),
    // name: 'AddPartyOrg',
    components: {
      AAffix: Affix,
      BaseInput,
    },
    computed: {
      token() {
        return Vue.getAcloudProvider().getAccessToken()
      }
    },
    mounted() {
      const param = {id: this.$route.query.id};
      getYouthMemberById(param).then((res) => {
        if (res && res.code == 0) {
          this.detail = res.data;
        }
        // this.detail.form = res.data;
      })
    },
    data() {
        return {
          btnloading: false,
          formDatas: [
            {key: 'userName', name: '团员名称'},
            {key: 'leagueTime', name: '入团时间'},
            {key: 'duesEndTime', name: '团费缴至时间'},
            {key: 'employeeNum', name: '员工编号'},
            {key: 'phone', name: '手机号码'},
            {key: 'currentPost', name: '当前岗位'},
            {key: 'idCard', name: '身份证号'},
            {key: 'sex', name: '性别'},
            {key: 'birthday', name: '出生日期'},
            {key: 'age', name: '年龄'},
            {key: 'education', name: '最高学历'},
            {key: 'email', name: '邮箱'},
            {key: 'youthOrgName', name: '当前所在团支部'},
            {key: 'youthPost', name: '团内职务'},
            {key: 'statusName', name: '状态'},
          ],
          detail: {
            // userName: '多少度多少度多少度多少度多少度多少度多少度',
            // type: 1,
            // leagueTime: '2020-12-08'
          },
          rules: {
            leagueTime: [ { required: true, message: '请选择入团时间', trigger: 'change' } ],
            duesEndTime: [ { required: true, message: '请选择团费缴至时间', trigger: 'change' } ],
          }
        }
    },
    watch:{
      // 'detail.type': {
      //   handler(nv, old) {
      //     if (nv !== 1) {
      //     }
      //   }
      // }
    },
    methods: {
      showDuesModal(type, id) {
        this.duesModal.visible = true;
        this.duesModal.type = type;
        this.duesModal.curId = id ? id : null;
      },
      showDevelopmentModal(type, id) {
        this.developmentModal.visible = true;
        this.developmentModal.type = type;
        this.developmentModal.curId = id ? id : null;
      },
      
      refreshDuesTable() {
        this.$refs.DuesTable.refresh(true)
      },
      refreshDevelopmentTable() {
        this.$refs.DevelopmentTable.refresh(true)
      },
      onDuesSelectChange(selectedRowKeys) {
        this.duesSelectedRowKeys = selectedRowKeys;
      },
      onDevelopmentSelectChange(selectedRowKeys) {
        this.developmentSelectedRowKeys = selectedRowKeys;
      },
      delDues() {
        this.$confirm({
            title: '温馨提示',
            content: '请确定删除选中数据吗？',
            onOk: () => {
                return deleteMemberDues({id: this.duesSelectedRowKeys}).then((res) => {
                   if (res.code == 0) {
                     this.$message.success('删除成功！');
                     this.refreshDuesTable();
                   }
                }).catch(() => {})
            },
        })
      },
      delDevelopment() {
        this.$confirm({
            title: '温馨提示',
            content: '请确定删除选中数据吗？',
            onOk: () => {
                return deleteDevelopment({id: this.developmentSelectedRowKeys}).then((res) => {
                   if (res.code == 0) {
                     this.$message.success('删除成功！');
                     this.refreshDevelopmentTable();
                   }
                }).catch(() => {})
            },
        })
        
      },
      formatValue(item) {
        const value = this.detail[item.key];
        if (item.map) {
          return item.map[value]
        }
        return value
      },
      handleClose() {
        this.$multiTab.close(this.$route.fullpath);
      },
      confirmSub(text,func) {
        let _this = this;
        this.$confirm({
          title: '温馨提示',
          content: text,
          onOk:() => {
            return func()
          },
          onCancel() {
          },
        });
      },
      submitFunc() {
        const param = {
          id: this.$route.query.id,
        }
        param.type = this.detail.type;
        param.duesEndTime = this.detail.duesEndTime;
        param.leagueTime = this.detail.leagueTime;
        this.btnloading = true;
        return updatePartyMember(param).then((res) => {
          this.btnloading = false;
          if (res.code == 0) {
            this.$message.success('修改成功！');
            this.handleClose();
          }
        }).catch(() => {
          this.btnloading = false;
        })
      },
      submitForm() {
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            this.confirmSub('确认提交吗？', this.submitFunc);
          }
        })
      }
    }
}
</script>

<style lang="less" scoped>
  .ant-form-item{
    display: flex;
  }
</style>
